<template>
  <div style="height: 600px">
     学生成绩单
     <Table border :columns="columns1" :data="data1"></Table>
     <!-- 模态框 -->
     <Modal
        v-model="displayModal"
        title="学生学习成绩修改"
        >
        <div class='modal'>
            <div>
                学生姓名：<input type="text" v-model="edit.name" style="width:200px;height:30px"></input>
            </div>
            <div>
                学生班级：<input type="text" v-model="edit.class" style="width:200px;height:30px"></input>
            </div>
            <div>
                java成绩：<input type="text" v-model="edit.java" style="width:200px;height:30px"></input>
            </div>
            <div>
                web成绩：<input type="text" v-model="edit.web" style="width:200px;height:30px"></input>
            </div>
            <div>
                mysql成绩：<input type="text" v-model="edit.mysql" style="width:200px;height:30px"></input>
            </div>
        </div>
    </Modal>
   </div>
</template>
<script>
export default {
  data(){
    return {
      params:{},
      edit: {},
      displayModal: false,
      columns1: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Class',
                        key: 'class'
                    },
                    {
                        title: 'Java',
                        key: 'java'
                    },
                    {
                        title: 'Web',
                        key: 'web'
                    },
                    {
                        title: 'MySql',
                        key: 'mysql'
                    },
                    {
                        title:'操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: (e) => {
                                            this.displayModal=true,
                                            console.log(params.index);
                                            // console.log('e.target :>> ', e.target);
                                            this.edit = this.data1[params.index];
                                        }
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
                ],
                    data1: [
                        {
                            name: '朱燃',
                            class:'H1',
                            java: 75,
                            web: 85,
                            mysql: 95
                        },
                        {
                            name: '皓洁',
                            class:'H1',
                            java: 65,
                            web: 82,
                            mysql: 83
                        },
                        {
                            name: '赵轩',
                            class:'C2',
                            java: 73,
                            web: 91,
                            mysql: 92
                        },
                        {
                            name: '露露',
                            class:'C3',
                            java: 75,
                            web: 80,
                            mysql: 93
                        }
                    ],
                    
    }
  },
  methods:{
      
  }
}
</script>
<style scoped>
  .modal{
      display: flex;
      flex-direction:column;
      justify-content: center;
      align-items: center;
  }
  .modal > *{
      margin:10px;
      /* width:100px; */
  }
</style>
